<template>
  <el-dialog
    class="redesign-dialog"
    v-bind="$attrs"
    :title="$t('flyparam.redesign')"
    width="30%"
    v-on="$listeners"
    @closed="close"
    @open="open"
  >
    <div class="warn">
      <svg-icon icon-class="warning" class-name="octicon-alert" />
      <strong style="font-size: 1.2em">{{
        $t('flyparam.redesign_tip1')
      }}</strong>
      <p class="ml-9 mt-1">{{ $t('flyparam.redesign_tip2') }}</p>
      <p class="ml-9 mt-1">{{ $t('flyparam.redesign_tip3') }}</p>
    </div>
    <template #footer>
      <div>
        <el-button
          class="btn-danger"
          type="primary"
          size="small"
          @click="confirm"
          >{{ $t('flyparam.redesign_confirm') }}</el-button
        >
      </div></template
    >
  </el-dialog>
</template>

<script>
import { resetTemplate } from '@/api/parameter'
export default {
  props: {
    templateId: String
  },
  data() {
    return {}
  },
  methods: {
    close() {
      this.$emit('update:model-value', false)
    },
    open() {},
    confirm() {
      const templateId = this.templateId || this.$route.params.id
      resetTemplate(templateId)
        .then((res) => {
          if (res != undefined) {
            this.$message.success(this.$t('flyparam.redesign_success'))
            this.$emit('update:model-value', false)
            if (!this.templateId) {
              this.$router.replace(`/vas/fly-parameter/index/${res.id}`)
            }
            this.$emit('confirm')
          }
        })
        .catch(this.$confirmError)
    }
  }
}
</script>

<style scoped lang="scss">
$btnDangerBg: #f6f8fa;
$btnDangerHoverBg: #a40e26;
$btnDangerColor: #cf222e;
$btnDangerHoverColor: #ffffff;
$btnDangerBorder: rgba(27, 31, 36, 0.15);
$btnDangerHoverBorder: rgba(27, 31, 36, 0.15);
.redesign-dialog {
  .warn {
    margin-top: -1px;
    border-width: 1px 0;
    border-radius: 0;
    color: #24292f;
    background-image: linear-gradient(#fff8c5, #fff8c5);
    border-color: rgba(212, 167, 44, 0.4);
    position: relative;
    padding: 20px 16px;
    border-style: solid;
  }

  .octicon-alert {
    color: #9a6700;
    margin-right: 12px;
    font-size: 24px;
  }

  &::v-deep .btn-danger {
    width: 100%;
    display: block;
    margin: 0;
    color: $btnDangerColor;
    background-color: $btnDangerBg;
    font-size: 14px;
    line-height: 20px;
    border-color: $btnDangerBorder;
    &:hover {
      color: $btnDangerHoverColor;
      background-color: $btnDangerHoverBg;
      border-color: $btnDangerHoverBorder;
    }
  }
}
</style>
